<template>
	<view class="box">
		<!-- 选择会员 -->
		<view class="selectMember">
			<view class="member">
				<text style="position: relative;">{{start_date || '日期：'}}
					<picker mode="date" :start="start" :end="end" v-if="!selected"  @change="bindDateChange" style="position: absolute;left:0;top: 0;width: 100%;height: 100%;">
						<!-- <view class="date">{{start_date}}</view> -->
					</picker> 
				</text>
			</view>
			<view class="save" @click="showModalbtn(4)" v-if="!selected">保存</view>
			<view class="toSend" @click="selected != 1 ? showModalbtn(2) : ''" >申请评估</view>
		</view>
		
		<view class="content">
			<view class="modular">
				<view class="title">
					<image src="@/static/img/healthStatus/general@2x.png"></image>
				</view>
				<table>
					<tr>
						<td>名称</td>
						<td>单位</td>
						<td>检测结果</td>
					</tr>
					<tr v-for="(item,index) in commonly" :key="index">
						<td>{{item.inputName}}</td>
						<td>{{item.inputCompany}}</td>
						<td v-if="item.inputName == '收缩压/舒张压'">
							<input type="number" v-model="bloodPressure1" :disabled="index == 2 || selected == 1" @input="basicInput" placeholder="数值"> |
							<input type="number" v-model="bloodPressure2" :disabled="index == 2 || selected == 1" @input="basicInput" placeholder="数值">
						</td>
						<td v-else>
							<input type="number" v-model="dataArr[item.name]" :data-id="index" :disabled="index == 2 || selected == 1" @input="basicInput" placeholder="数值">
						</td>
					</tr>
				</table>
			</view>
			
			<view class="modular">
				<view class="title"><image src="@/static/img/healthStatus/biochemical@2x.png"></image></view>
				<table>
					<tr>
						<td>名称</td>
						<td>单位</td>
						<td>检测结果</td>
					</tr>
					<tr v-for="(item,index) in biochemistry" :key="index">
						<td>{{item.inputName}}</td>
						<td v-if="item.inputName == '白细胞计数' || item.inputName == '红细胞计数' || item.inputName == '血小板计数'"><image mode="widthFix" src="@/static/img/healthStatus/icon-109.png" style="width:80rpx;"></image></td>
						<td v-else>{{item.inputCompany}}</td>
						<td v-if="item.inputName == '收缩压/舒张压'">
							<input type="number" v-model="bloodPressure2"  :disabled="index == 2 || selected == 1" @input="basicInput" placeholder="舒张压">|
							<input type="number" v-model="bloodPressure1"  :disabled="index == 2 || selected == 1" @input="basicInput" placeholder="收缩压"> 			
						</td>
						<td v-else>
							<input type="number" v-model="dataArr[item.name]" :data-id="index" :disabled="selected == 1"  @input="basicInput" placeholder="数值">
						</td>
					</tr>
				</table>
			</view>
			
			<view class="modular">
				<view class="title"><image src="@/static/img/healthStatus/auxiliary@2x.png" style="width: 204upx;"></image></view>
				<table>
					<tr>
						<td>检查项目</td>
						<td>检测结果</td>
					</tr>
					<tr v-for="(aitem,aindex) in auxiliaryData" :key="aindex">
						<td>{{aitem.name}}</td>
						<td>
							<input type="text" placeholder="正常/异常名称" :disabled="selected == 1" v-model="aitem.value">
						</td>
					</tr>
					<tr v-for="(aitem,aindex) in parameterValues" :key="'b'+aindex">
						<td>
							<input type="text" v-model="aitem.name"  :disabled="selected == 1" placeholder="项目">
						</td>
						<td class="delStyle">
							<input type="text" v-model="aitem.value" :disabled="selected == 1" placeholder="正常/异常名称">
							<image src="@/static/img/quickly/follow/closeFollow.png" mode="widthFix" class="delImage" @click="del(aindex)" ></image>
						</td>	
					</tr>
					<view class="addOther" v-if="selected != 1"  @click="addDynamicData"><image src="@/static/img/healthStatus/addFollow.png"></image>添加其他</view>
				</table>
			</view>
			
			<view class="modular">
				<view class="title"><image src="@/static/img/healthStatus/otherInspection@2x.png"></image></view>
				<table>
					<tr v-if="isCheckDxData && isCheckDxData.length > 0">
						<td>名称</td>
						<td>单位</td>
						<td>检测结果</td>
					</tr>
					<tr v-if="isCheckDxData && isCheckDxData.length > 0" v-for="(bitem,bindex) in isCheckDxData" :key="bindex">
						<td>{{bitem.name}}</td>
						<td>{{bitem.units || '-'}}</td>
						<td><input type="text" v-model="bitem.input" :disabled="selected == 1" placeholder="数值"></td>
					</tr>
					<view class="addOther" v-if="selected != 1" @click="[dialog=true,type='dxsj',getReportTemplateStencilPageAxios({pageIndex:pageIndex,pageSize:20})]" style="background-color: #F6F7FB;"><image src="@/static/img/healthStatus/addFollow.png"></image>选择体检项目</view>
				</table>
			</view>
			
			<view class="dialog" v-if="dialog">
				<view class="bg" @click="dialog = false"></view>
				<view class="content">
					<view class="search">
						项目名称：<input type="text" v-model="abnormalName"/>
						<span @click="onSearch">查询</span>
						<span @click="dialogSubmit" class="solidColor">确认</span>
					</view>
					<wyb-table ref="table" :headers="dialogHeaders2" @onCheck="onCheck" :contents="dialogcontents" @callbackdata="getcallbackdata" width="88vw" height="50vh" enable-check="multiple" text-align="left" header-bg-color="#38CB97" header-ft-color="#fff" checker-border-color="#ccc" first-col-bg-color="#fff" checker-cell-bg-color="#fff" checker-box-bg-color="#fff" border-bottom="none"/>
					<view class="btn">
						<span 
							@click="[pageIndex--,getReportTemplateStencilPageAxios({abnormalName:abnormalName,pageIndex:pageIndex,pageSize:10})]">
						上一页</span>
						<span 
							@click="[pageIndex++,getReportTemplateStencilPageAxios({abnormalName:abnormalName,pageIndex:pageIndex,pageSize:10})]">
						下一页</span>
					</view>
				</view>
				<view class="closeImage">
					<image mode="widthFix" src="@/static/img/quickly/internation/del.png"  @click="dialog = false"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import {getUrlParam} from '@/static/js/filter.js'
	export default{
		components: {
			wybTable
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				start:'',
				end:currentDate,
				start_date:'',
				dataArr:{},
				selected: '',
				isCheckDx:[],
				examinationOrgan:'',
				dynamicData:[], //辅助项目添加其他
				bloodPressure1:'',
				bloodPressure2:'',
				// 所有体检项目分页参数
				dialog: false,
				pageIndex:1,
				totalCount:0,
				abnormalName:'',
				commonly:[{inputName:'身高',inputCompany:'m',inputData:'',name:'height'},{inputName:'体重',inputCompany:'kg',inputData:'',name:'weight'},{inputName:'体重指数',inputCompany:'kg/m²',inputData:'',name:'bodyIndex'},{inputName:'腰围',inputCompany:'cm',inputData:'',name:'waist'},{inputName:'收缩压/舒张压',inputCompany:'mmHg',inputData:'',name:'bloodPressure'},{inputName:'心率',inputCompany:'次/分',inputData:'',name:'heartRate'}],
				biochemistry:[{inputName:'总胆固醇',inputCompany:'mmol/L',inputData:'',name:'cholesterol'},{inputName:'甘油三酯',inputCompany:'mmol/L',inputData:'',name:'triacylglycerol'},{inputName:'高密度脂蛋白胆固醇',inputCompany:'mmol/L',inputData:'',name:'highCholesterol'},{inputName:'低密度脂蛋白胆固醇',inputCompany:'mmol/L',inputData:'',name:'lowCholesterol'},{inputName:'空腹血糖',inputCompany:'mmol/L',inputData:'',name:'bloodGlucose'},{inputName:'餐后2小时血糖',inputCompany:'mmol/L',inputData:'',name:'towBloodGlucose'},{inputName:'血尿酸',inputCompany:'μmol/L',inputData:'',name:'bloodUricAcid'},{inputName:'谷丙转氨酶',inputCompany:'U/L',inputData:'',name:'aminotransferase'},{inputName:'白细胞计数',inputCompany:'109/L',inputData:'',name:'whiteCell'},{inputName:'总胆红素',inputCompany:'μmol/L',inputData:'',name:'bilirubin'},{inputName:'红细胞计数',inputCompany:'109/L',inputData:'',name:'redCell'},{inputName:'血尿素氮',inputCompany:'mmol/L',inputData:'',name:'bloodUreaNitrogen'},{inputName:'血红蛋白',inputCompany:'g/L',inputData:'',name:'hemoglobin'},{inputName:'血肌酐',inputCompany:'μmol/L',inputData:'',name:'bloodMuscle'},{inputName:'血小板计数',inputCompany:'109/L',inputData:'',name:'plateletCount'}],
				auxiliaryData:[{name:'心电图',value:''},{name:'腹部超声',value:''},{name:'X线胸片',value:''}],
				parameterValues:[], //添加辅助项目
				isCheckDxData:[], //选中的单项数据
				// 异常体检表头
				dialogHeaders2:[{label: '科室',key:'sectionName'},{label: '名称',key:'name'},{label: '参考范围',key:'va'},{label: '单位',key:'units'}],
				dialogcontents: [],
				sex: '',
				id:'',
				selected:''
			}
		},
		mounted() {
			this.sex = localStorage.getItem('userInfo') && JSON.parse(localStorage.getItem('userInfo')).sex == 1 ? '男' : '女';
			if(getUrlParam('id')) {
				this.id = getUrlParam('id');
				this.selected = getUrlParam('selected')
				this.$api.HealthExaminationReportDetails(this.id).then((res) => {
					if(res.data.returnCode == 200) {
						this.userId = res.data.result && res.data.result.newExaminationReportRes.userId;
						this.start_date = res.data.result && res.data.result.newExaminationReportRes.fillFormDate;
						this.dataArr = res.data.result.newExaminationReportRes;
						this.bloodPressure1 = res.data.result.newExaminationReportRes.bloodPressure == '-1' ? '' : res.data.result.newExaminationReportRes
							.bloodPressure.split('/')[0]
						this.bloodPressure2 = res.data.result.newExaminationReportRes.bloodPressure == '-1' ? '' : res.data.result.newExaminationReportRes
							.bloodPressure.split('/')[1]
						this.auxiliaryData = res.data.result.newExaminationReportRes.auxiliaryExamination && JSON.parse(res.data.result
							.newExaminationReportRes.auxiliaryExamination).map((a) => {
							if (a.value == -1) {
								a.value = ''
							}
							return a
						});
						this.isCheckDxData = res.data.result && res.data.result.newExaminationReportRes.individuals.length > 0 && res.data
							.result.newExaminationReportRes.individuals.map((a) => {
								a.input = a.value;
								a.itemName = a.name;
								a.itemId = a.key;
								return a
							}) || [];
						this.commonly.map((a, ai) => {
							if (res.data.result.newExaminationReportRes[a.name]) {
								if (res.data.result.newExaminationReportRes[a.name] == -1) {
									res.data.result.newExaminationReportRes[a.name] = ''
								}
								a.dataId = ai + ''
							}
							return a
						})
						this.biochemistry.map((a, ai) => {
							if (res.data.result.newExaminationReportRes[a.name]) {
								if (res.data.result.newExaminationReportRes[a.name] == -1) {
									res.data.result.newExaminationReportRes[a.name] = ''
								}
								a.dataId = ai + ''
							}
							return a
						})
					}
				})
			}
		},
		methods:{
			showModalbtn(e) {
				if(!this.start_date) {
					uni.showToast({
						title:'请选择体检时间',
						icon:'none'
					})
					return
				}
				//辅助检查项目
				const arr = this.auxiliaryData.concat(this.parameterValues)
				if(arr[0].value == '') {arr[0].value = -1.0}
				if(arr[1].value == '') {arr[1].value = -1.0}
				if(arr[2].value == '') {arr[2].value = -1.0}
				
				//其他
				const individuals = this.isCheckDxData && this.isCheckDxData.length > 0 && this.isCheckDxData.map((a)=>{
					return {name:a.itemName,value:a.input,key:a.itemId}
				}) || [];
				
				let record = {}
				this.commonly.map((a)=>{
					if(!this.dataArr[a.name]){
						record[a.name] =  -1.0
					}else{
						record[a.name] = Number(this.dataArr[a.name])
					}
				})		
				
				if(record.height == -1) {
					uni.showToast({
						title:'请填写身高',
						icon:'none'
					})
					return
				}
				
				if(record.weight == -1) {
					uni.showToast({
						title:'请填写体重',
						icon:'none'
					})
					return
				}
				this.biochemistry.map((a)=>{
					if(!this.dataArr[a.name]){
						record[a.name] =  -1.0
					}else{
						record[a.name] = Number(this.dataArr[a.name])
					}
				})
				record.bloodPressure = !this.bloodPressure1 && !this.bloodPressure2 ? '-1' : (this.bloodPressure1 || -1) + '/' + (this.bloodPressure2 || -1 )
				record.parameterValues = arr
				record.individuals = individuals
				record.userId = JSON.parse(localStorage.userInfo).userId
				record.organ = this.organ
				record.fillFormDate = this.start_date
				record.status = e
				record.healthId = JSON.parse(localStorage.userInfo).healthId
				this.upData = record;			
				if(this.id) {
					record.id = this.id
					this.$api.HealthExaminationReportUpdate(record).then((res)=>{
						if(res.data.returnCode == 200) {
							uni.showToast({
								title:'保存成功',
								icon:'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url:'/pages/healthStatus/navigation?current=1'
								})
							},1000)
						}
					})				
					
				}else {
					this.$api.HealthExaminationReportSave(record).then((res)=>{
						if(res.data.returnCode == 200) {
							uni.showToast({
								title:'保存成功',
								icon:'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url:'/pages/healthStatus/navigation?current=1'
								})
							},1000)
						}
					})
					
				}
			},
			//计算体质指数
			basicInput(e){
				if(e.currentTarget.dataset.id == 0 || e.currentTarget.dataset.id == 1){
					if(this.dataArr.weight && this.dataArr.height){
						this.dataArr.bodyIndex = (this.dataArr.weight / Math.pow((this.dataArr.height),2)).toFixed(1)
					}else{
						this.dataArr.bodyIndex =''
						this.commonly[2].dataId = ''
					}
				}
			},
			// 选中的异常
			onCheck(e){
				let data = e.data.map((res)=>{return res.lineData})
				this.isCheckDx = data
			},
			// 单项数据回调
			dxgetcallbackdata(e){
				let keyArr = Object.keys(e[0]).map((a)=>{
					return a
				})
				const reportItemS = e[1].map((a,ai)=>{
					keyArr.map((b,bi)=>{
						if(a.itemId == b){
							a.itemId = b;
							a.itemValue = e[0][b]
						}else if(a.reportNo == b){
							a.itemId = b;
							a.itemValue = e[0][b]
						}
					})
					return a
				})
				this.dxgetcallback = reportItemS
			},
			dialogSubmit(){
				const isrepeat = []
				this.commonly && this.commonly.map((a)=>{
					this.isCheckDx.map((c)=>{
						if(c.itemName == a.inputName){
							isrepeat.push(c)
						}
					})
				})
				this.biochemistry && this.biochemistry.map((a)=>{
					this.isCheckDx.map((c)=>{
						if(c.itemName == a.inputName){
							isrepeat.push(c)
						}
					})
				})
				if(isrepeat.length > 0){
					uni.showToast({title:isrepeat[0].itemName+'重复',icon:'none'})
					return;
				}
				if(this.isCheckDxData.length <= 0){
					this.isCheckDxData = this.isCheckDx
				}else{
					const hasRepeat = this.isCheckDxData.filter((a,ai)=>{
						const arr = this.isCheckDx.filter((b,bi)=>{return b.name == a.name})
						return arr.length > 0
					})
					if(hasRepeat.length > 0){
						uni.showToast({title:'已有重复项',icon:'none'})
						return;
					}
					this.isCheckDxData = this.isCheckDxData.concat(this.isCheckDx);
				}
				this.dialog = false;
			},
			onSearch(){
				this.pageIndex = 1
				this.getReportAbnormalPageAxios({abnormalName:this.abnormalName,pageIndex:this.pageIndex,pageSize:20})
			},
			// 获取所有异常
			getReportAbnormalPageAxios(data) {
				uni.showLoading({
					title: '加载中...'
				})
				this.$api.getReportAbnormalPage(data).then((res) => {
					uni.hideLoading()
					this.dialogcontents = res.data.result.list.map((e) => {
						return {
							name: e.abnormalName,
							// Wpercentage: '82vw',
							// reportNo: e.abnormalCode
						}
					})
					this.totalCount = Math.ceil(res.data.result.totalCount  && res.data.result.totalCount / 20)		
				})
			},
			// 获取所有体检项目
			getReportTemplateStencilPageAxios(data){
				const _this =this;
				uni.showLoading({title:'加载中...'})
				_this.$api.getReportTemplateStencilPage(data).then((res)=>{
					uni.hideLoading()
					_this.totalCount = Math.ceil(res.data.result.totalCount / 20)
					_this.dialogcontents = res.data.result.list.map((e)=>{
						_this.isCheckDx.map((c)=>{
							if(e.itemName == c.itemName){
								e.checked = true
							}
						})
						e.name = e.itemName
						e.maxValue = e.maxVa
						e.minValue = e.minVa
						e.va = e.minVa+'~'+e.maxVa
						return e
					}).filter(b=>{
						if(_this.sex == '男'){
							return b.itemName.indexOf('女') <= -1
						}else{
							return b.itemName.indexOf('男') <= -1
						}
					})
				})
			},
			// 添加辅助项目
			addDynamicData() {
				this.parameterValues.push({name:'',value:''})
			},
			del(index) {
				this.parameterValues.splice(index,1)
			},
			// 日期
			bindDateChange(e) { 
				this.start_date = e.target.value;
			},
			// 获取当前时间
			getDate(type) {
			   const date = new Date();
			   let year = date.getFullYear();
			   let month = date.getMonth() + 1;
			   let day = date.getDate();
			  
			   if (type === 'start') {
				year = year - 60;
			   } else if (type === 'end') {
				year = year + 2;
			   }
			   month = month > 9 ? month : '0' + month;;
			   day = day > 9 ? day : '0' + day;
			   return `${year}-${month}-${day}`;
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/monitor/accomplishment/index.scss';
	.content {
		.modular {
			width: 702upx;
			margin: 0 auto 24upx;
			background-color: #FFFFFF;
			border-radius: 14upx;
			box-sizing: border-box;
			.title {
				image {
					width: 140upx;
					height: 36upx;
					display: table;
					margin:0 auto;
					padding: 28upx 0;
				}
				// padding: 28upx 0;
				// color: #05C6AD;
				// font-size: 34upx;
				// text-align: center;
				// font-weight: bold;			
			}
			table {
				width: 702upx;
				border-spacing: 0 !important;
				tr {
					background-color: #FFFFFF;
					display: flex;
					padding: 16upx 0;
					box-sizing: border-box;
					text-align: center;
					border-bottom: 1upx solid #E3E4EB;
					margin: 0 8upx;
					td {
						color: #333333;
						display: flex;
						justify-content: center;
						align-items: center;
						flex: 1;
						text-align: center;
						min-height: 60upx;
						input {
							width: 100%;
							font-size: 28upx;
							height: 100%;
						}
					}
					td:last-child {
						border: 0;
					}
				}
				tr:nth-child(1) {
					background-color: #F6F7FB;
					box-sizing: border-box;
					border-radius: 12upx;
					border: none;
				}
				tr:last-child {
					border: none;
				}
				.delImage {
					width: 22upx;
					height: 24upx;
					margin: auto 24upx auto 8upx;
				}
				.delStyle {
					display: flex;
				}
				.addOther {
					width: 686upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					border-radius: 12upx;
					color: #A8B2D1;
					font-size: 26upx;
					margin: 0 8upx;
					image {
						width: 26upx;
						height: 26upx;
						margin-right: 14upx;
						vertical-align: revert;
					}
				}
			}
		}
		.modular:last-child {
			padding-bottom: 36upx;
		}
	}
	.dialog{
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		.bg{
			width: 100vw;
			height: 100vh;
			position: absolute;
			left: 0;
			top: 0;
			background: rgba(0,0,0,.5);
		}
		.closeImage {
			position: fixed;
			bottom: 9%;
			left: 50%;
			transform: translateX(-50%);
			image {
				width: 42upx;
				height: 42upx;
			}
		}
		.content{
			padding:4% 3%;
			position: absolute;
			width: 94%;
			height: 862upx;
			left: 3%;
			top: 10%;
			background: #fff;
			box-sizing: border-box;
			.wyb-table-header{
				width: 400upx !important;
			}
			.search{
				display: flex;
				font-size: 28upx;
				align-items: center;
				margin-bottom: 30upx;
				input{
					height: 50upx;
					padding-left: 10upx;
					border: 1upx solid #E4E4E4;
					border-radius: 8upx;
					flex: 1;
					font-size: 28upx;
				}
				span{
					display: inline-block;
					padding: 8upx 18upx;
					color: #333333;
					margin-left: 20upx;
					border-radius: 8upx;
					background-color: #EBFFF8;
					font-size: 28upx;
				}
				.solidColor {
					background-color: #38CB97;
					color: #FFFFFF;
				}
				image{
					width: 40upx;
					margin-left: 40upx;
				}
			}
		}
		.btn{
			display: flex;
			justify-content: center;
			margin-top: 12upx;
			span{
				background: #F5F5F5;
				display: inline-block;
				margin: 0 60upx;
				width: 162upx;
				height: 54upx;
				text-align: center;
				line-height: 54upx;
				font-size: 26upx;
				border-radius:4upx;
				color: #333333;
				font-size: 28upx;
			}
		}
	}
</style>
